<template>
	<view>
		<carHeader :title="'订单管理'"></carHeader>
		<view class="rongqi1">
			<uni-search-bar placeholder="请输入你要搜索的内容" v-model="inputValue" bgColor="#ffffff" @input="handleInput"
				@confirm="search" />
		</view>
		<view class="rongqi2">
			<view class="sl">
				共{{ filteredList.length }}条
			</view>

			<view class="fw">
				<select @change="filterItems" class="status-select" v-model="currentStatus">
					<option value="全部">全部</option>
					<option value="待服务">待服务</option>
					<option value="已完成">已完成</option>
				</select>
			</view>
		</view>

		<block v-for="(item, index) in filteredList" :key="index">
			<view class="xq">
				<view class="bianhao">
					<text style="font-size: 26rpx; font-weight: 600;">订单编号: {{item.ordNumber}}</text>
					<text
						style="font-size: 26rpx; margin-left: 280rpx; color: red; font-weight: 600;">{{item.ordActualPrice}}元</text>
				</view>
				<view class="yonghu" style="font-size: 26rpx;">
					<view class="a1" style="margin-top: 6rpx;">
						下单用户: {{item.nickName}}
					</view>
					<view class="a2" style="margin-top: 6rpx;">
						预约时间: {{item.bookingTime}}
					</view>
					<view class="a3" style="margin-top: 6rpx;">
						服务项目: {{item.proName}}
					</view>
				</view>
				<view class="dj">
					<view class="a4" style="font-size: 20rpx; margin-top: 14rpx; color: #bebebe;">
						下单时间: {{item.ordOrderTime}}
					</view>
					<view class="a5">
						<button class="a5an" @click="getDetails(item)">查看详情</button>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allList: [],
				myList: [],
				showDetails: false, // 控制 xq 标签的显示与隐藏			
				list: [],
				inputValue: '',
				currentStatus: '全部', // 当前选中的状态
				// 定义订单状态

			};
		},
		computed: {
			filteredList() {
			      const { currentStatus, myList } = this;
				  console.log(myList);
			      if (currentStatus === '全部') {
					console.log(myList);
			        return myList;
			      } else if (currentStatus == '待服务') {
			        return myList.filter(item => item.ordStatus == '待核销' || item.ordStatus == '待支付');
			      } else if (currentStatus == '已完成') {
			        return myList.filter(item => item.ordStatus == '已完成' || item.ordStatus == '已退款' || item.ordStatus == '已取消');
			      }
			      return [];
			    }
		},
		onLoad() {
		  var that = this;
		  uni.request({
		    url: 'http://localhost:8080/carShopService/order/list',
		    success: function(res) {
		      if (res.statusCode === 200) {
		        console.log("Data loaded:", res.data);
		        that.$set(that, 'myList', res.data); // 直接更新 myList
		        console.log('核销码', that.myList[0].ordVerificationCode);
		      } else {
		        console.error('请求失败，状态码：', res.statusCode);
		      }
		    },
		    fail: function(err) {
		      console.error('请求失败：', err);
		    }
		  });
		},


		methods: {
			filterItems() {
				console.log("2222", this.currentStatus);
			},
			handleInput(event) {
				console.log('当前输入的值:', this.inputValue);

			},

			search() {
				console.log("---");
				uni.request({
					url: 'http://localhost:8080/carShopService/order/query',
					method: 'POST',
					header: {
						'content-type': 'application/json',
					},
					data: {
						input: this.inputValue
					},
					success: (res) => {

						if (res.statusCode == 200) {
													console.log(res);
							if (res.data) {
								console.log(res.data);
								this.myList = res.data;
							} else {
								console.error('搜索接口返回数据结构不符合预期');
							}
						} else {
							console.error('搜索请求失败，状态码：', res.statusCode);
						}
					},
					fail: (err) => {
						console.error('搜索请求失败：', err);
					}
				});
			},

			getDetails(item) {
				uni.request({
					url: 'http://localhost:8080/carShopService/order/selectById?ordId',                  
					data: {
						ordId:  item.ordId
					},
					success: (res) => {
						if (res.statusCode === 200) {
							if (res.data && res.data.length > 0) { // 假设返回的数据是一个数组
								this.list = res.data;
								console.log('查询结果:', this.list);
								// 查询成功后跳转到目标页面
								uni.navigateTo({
									url: '/pages/orderDetails/orderDetails?data=' + encodeURIComponent(
										JSON.stringify(this.list)) + '&ordId=' + item.ordId
								});
							} else {
								console.log('未找到匹配的数据');
							}
						} else {
							console.error('查询失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})


			}
		}
	}
</script>

<style lang="scss">
	.a5an {
		height: 55rpx;
		margin-top: 12rpx;
		font-size: 24rpx;
		margin-bottom: 12rpx;
		color: white;
		background-color: blue;
		border-radius: 30rpx;

	}

	.dj {
		// border: 4rpx solid black;
		width: 94%;
		margin-left: 18rpx;
	}

	.yonghu {
		border-bottom: 3rpx solid #eee;
		width: 94%;
		margin-left: 18rpx;
	}

	.bianhao {
		height: 60rpx;
		border-bottom: 4rpx solid #eee;
		width: 94%;
		margin-left: 18rpx;
		margin-top: 20rpx;
	}

	.xq {
		// border: 4rpx solid black;
		width: 96%;
		margin-left: 12rpx;
		position: relative;
		top: -235rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.dj {
		display: flex;
		justify-content: space-between;
	}

	.rongqi2 {
		width: 88%;
		display: flex;
		margin-left: 50rpx;
		justify-content: space-between;
		position: relative;
		top: -250rpx;
		// border: 4rpx solid black;
	}

	.fw {
		display: flex;
		color: #ffffff;
		margin-right: 30rpx;
	}

	.sl {
		color: #ffffff;
	}

	.rongqi1 {
		position: relative;
		top: -250rpx;
		width: 96%;
		margin-left: 14rpx;
	}

	.biankuang {
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.arrow-down {
		width: 10rpx;
		height: 10rpx;
		border-right: 4rpx solid white;
		border-bottom: 4rpx solid white;
		transform: rotate(45deg);
	}

	.arrow-right {
		width: 10rpx;
		height: 10rpx;
		border-top: 4rpx solid white;
		border-left: 4rpx solid white;
		transform: rotate(45deg);
	}
</style>